<template>
  <div v-if="configObj" class="button-box">
    <div class="button-content">
      <div class="fixed-button">
        {{ buttonText }}
      </div>
    </div>
  </div>
</template>

<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2025 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
import { mapState } from 'vuex';
export default {
  name: 'home_button',
  cname: '报名/发布按钮',
  icon: 't-icon-zujian-anniu',
  configName: 'c_home_button',
  type: 0, // 0 基础组件 1 营销组件 2工具组件
  defaultName: 'button', // 外面匹配名称
  props: {
    index: {
      type: null,
    },
    num: {
      type: null,
    },
  },
  computed: {
    ...mapState('mobildConfig', ['defaultArray']),
    buttonText() {
      return this.configObj && this.configObj.buttonText && this.configObj.buttonText.val
        ? this.configObj.buttonText.val
        : '我要参赛';
    },
  },
  watch: {
    num: {
      handler(nVal, oVal) {
        let data = this.$store.state.mobildConfig.defaultArray[nVal];
        this.setConfig(data);
      },
      deep: true,
    },
    defaultArray: {
      handler(nVal, oVal) {
        let data = this.$store.state.mobildConfig.defaultArray[this.num];
        this.setConfig(data);
      },
      deep: true,
    },
  },
  data() {
    return {
      defaultConfig: {
        name: 'fixed_button',
        timestamp: this.num,
        setUp: {
          tabVal: 0,
          cname: '报名/发布按钮',
        },
        buttonText: {
          title: '按钮文字',
          val: '我要参赛',
          place: '请输入按钮文字',
          max: 10,
          isShow: 1,
        },
      },
      configObj: this.defaultConfig,
    };
  },
  methods: {
    setConfig(data) {
      if (data) {
        this.configObj = data;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.button-box {
  width: 100%;
  padding: 10px 0;
  text-align: center;
  margin: 10px 0;
}

.button-content {
  display: inline-block;
  width: 100%;
  max-width: 500px;
}

.fixed-button {
  // 固定样式，根据您提供的截图设计
  width: 100%;
  height: 40px;
  background-color: #ff6b00; // 橙色背景，与截图匹配
  color: #fff; // 白色文字
  font-size: 16px;
  font-weight: bold;
  border-radius: 5px; // 圆角，与截图匹配
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-sizing: border-box;
  border: none;
  outline: none;
  user-select: none;
  padding: 0 20px;
  min-width: 100px;

  // 鼠标悬停效果
  &:hover {
    opacity: 0.9;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 107, 0, 0.3);
  }

  // 鼠标按下效果
  &:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(255, 107, 0, 0.2);
  }
}
</style>
